<template>
  <span style="letter-spacing: -4px;">
    <Button :type="type" @click="clickButton" :size="size" :icon="icon" class="btn-left">
      <slot></slot>
    </Button>
    <Dropdown @on-click="clickItem" :trigger="trigger" class="btn-drop">
      <Button :type="type" icon="ios-arrow-down" :size="size" :transfer="transfer" :placement="placement" class="btn-drop-arrow"/>
      <template slot="list">
        <slot name="list"></slot>
      </template>
    </Dropdown>
  </span>
</template>

<script>
export default {
  name: "SplitButton",
  props: {
    type: {type: String, default: "primary"},
    size: {type: String},
    icon: {type: String},
    trigger: {type: String},
    transfer: {type: String},
    placement: {type: String},
  },
  methods: {
    clickButton() {
      this.$emit("click");
    },
    clickItem(key) {
      this.$emit("click-item", key);
    },
  }
}
</script>

<style scoped lang="less">
.btn-left {
  margin-right: 0 !important;
  //padding-right: 5px !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  letter-spacing: normal;
}
.btn-drop {
  margin-left: 0 !important;
  //border-left: 1px solid #ccc;
  letter-spacing: normal;
}
.btn-drop-arrow {
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  letter-spacing: normal;
}
</style>
